<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="keyword" content="电子网(公司名称)">
    <meta name="description" content="电子网(公司名称)">
    <title>产品详细页- 电子网(公司名称)</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/page.css">
    <style>
        /*点赞样式*/
        .art_right_tab table tr td{
            position: relative;
        }
        .art_right_tab table tr td span{
            display: inline-block;
            padding-left: 25px;
            position: relative;
            top: 2px;
        }
        .zan{
            width: 20px;
            position: absolute;
            top: 5px;
            left: 15px;
        }
    </style>
</head>

<body>
    <!--container 容器 -->
    <div class="container">
        <div class="header">
            <img src="images/logo.png" alt="电子网(公司名称)" class="fl">
            <div class="header-right fr">
                <!-- menu 菜单 -->
                <p class="menu fr">
                    <a href="">注册</a>
                    &nbsp; &nbsp; &nbsp;
                    <a href="">登录</a>
                </p>
                <div class="clear"></div>
                <!-- 导航 -->
                <ul class="mainbav fr">
                    <li>
                        <a href="" title="关于我们">关于我们</a>
                        <ul class="subnav">
                            <li><a href="" title="CEO 致词">CEO 致词</a></li>
                            <li><a href="" title="公司历史">公司历史</a></li>
                            <li><a href="" title="企业文化">企业文化</a></li>
                            <li><a href="" title="组织结构">组织结构</a></li>
                            <li><a href="" title="合作伙伴">合作伙伴</a></li>
                        </ul>
                    </li>
                    <li><a href="" title="产品展示">产品展示</a></li>
                    <li><a href="" title="新闻中心">新闻中心</a></li>
                    <li><a href="" title="人才招聘">人才招聘</a></li>
                    <li><a href="" title="客户留言">客户留言</a></li>
                </ul>
                <div class="clear"></div>
            </div>
            <div class="clear"></div>
        </div>

        <div class="banner">
            <!-- 横幅 -->
            <img src="images/article_banner.png" alt="">
        </div>

        <div class="main">
            <div class="sidebar fl margin_right">
                <img src="images/gouzi.png" alt="">
                <h3>我的账户</h3>
                <ul>
                    <li><a href="" title="我的详细信息">我的详细信息</a></li>
                    <li><a href="" title="修改详细信息">修改详细信息</a></li>
                    <li><a href="" title="我的留言">我的留言</a></li>
                </ul>
                <div class="clear"></div>
            </div>
            <div class="introduction fl">
                <div class="tops">
                    <span class="fl"><img src="images/title-bg-01.png" alt="" class="fl"></span>
                    <span class="pro_s fl">产品介绍</span>
                    <span class="drem_wr fl">梦想的世界</span>
                </div>
                <div class="contents">
                    <ul class="fl">
                        <li>主页 ></li>
                        <li>产品展示 ></li>
                        <li> 电脑 ></li>
                        <li> 产品介绍 </li>
                    </ul>
                </div>
            </div>
            <div class="art_list_ones">
                <img src="images/art_list1_right.png" alt="" title="列表" class="fl mar_s">
                <div class="art_right_tab">
                    <table border="1" width="680px">
                        <th>编号</th>
                        <th>标题</th>
                        <th style="width:60px;">作者</th>
                        <th>日期</th>
                        <th>点击数</th>
                        <tr>
                            <td>52</td>
                            <td align="left" style="padding-left:5px;">Ahsapeuro一体的综合管理能力 </td>
                            <td>web</td>
                            <td>2008-07-04</td>
                            <td><img src="images/zan1.png" alt="" class="zan"><span>30</span></td>
                        </tr>
                        <tr>
                            <td>51</td>
                            <td align="left" style="padding-left:5px;">与此同时，你可以探测多个。 </td>
                            <td>web</td>
                            <td>2008-07-04</td>
                            <td><img src="images/zan1.png" alt="" class="zan"><span>30</span></td>
                        </tr>
                        <tr>
                            <td>50</td>
                            <td align="left" style="padding-left:5px;"> 可以应用到许多多站点访问统计的地方。 </td>
                            <td>web</td>
                            <td>2008-07-04</td>
                            <td><img src="images/zan1.png" alt="" class="zan"><span>30</span></td>
                        </tr>
                        <tr>
                            <td>49</td>
                            <td align="left" style="padding-left:5px;"> 照片丝绸线组指定的大小自动的。 </td>
                            <td>web</td>
                            <td>2008-07-04</td>
                            <td><img src="images/zan1.png" alt="" class="zan"><span>30</span></td>
                        </tr>
                        <tr>
                            <td>48</td>
                            <td align="left" style="padding-left:5px;"> 方便的功能自动论坛。 </td>
                            <td>web</td>
                            <td>2008-07-04</td>
                            <td><img src="images/zan1.png" alt="" class="zan"><span>30</span></td>
                        </tr>
                        <tr>
                            <td>47</td>
                            <td align="left" style="padding-left:5px;">随时随地提供快速和强大的Web邮件。 </td>
                            <td>web</td>
                            <td>2008-07-04</td>
                            <td><img src="images/zan1.png" alt="" class="zan"><span>30</span></td>
                        </tr>
                        <tr>
                            <td>46</td>
                            <td align="left" style="padding-left:5px;">Ahsapeuro一体的综合管理能力 </td>
                            <td>web</td>
                            <td>2008-07-04</td>
                            <td><img src="images/zan1.png" alt="" class="zan"><span>30</span></td>
                        </tr>
                        <tr>
                            <td>45</td>
                            <td align="left" style="padding-left:5px;">Ahsapeuro一体的综合管理能力 </td>
                            <td>web</td>
                            <td>2008-07-04</td>
                            <td><img src="images/zan1.png" alt="" class="zan"><span>30</span></td>
                        </tr>
                        <tr>
                            <td>44</td>
                            <td align="left" style="padding-left:5px;">Ahsapeuro一体的综合管理能力 </td>
                            <td>web</td>
                            <td>2008-07-04</td>
                            <td><img src="images/zan1.png" alt="" class="zan"><span>30</span></td>
                        </tr>
                        <tr>
                            <td>43</td>
                            <td align="left" style="padding-left:5px;">Ahsapeuro一体的综合管理能力 </td>
                            <td>web</td>
                            <td>2008-07-04</td>
                            <td><img src="images/zan1.png" alt="" class="zan"><span>30</span></td>
                        </tr>
                    </table>
                    <div class="clear"></div>
                </div>
                <div class="rows_box">
                    <ul class="rows_fl">
                        <li><img src="images/rows.png" alt=""></li>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                        <li>6</li>
                        <li>7</li>
                        <li>8</li>
                        <li>9</li>
                        <li>10</li>
                        <li><img src="images/row.png" alt=""></li>
                    </ul>
                </div>
                <div class="clear"></div>
                <div class="actions">
                    <span class="head_title">
                        <select name="head_title" id="head_title">
                            <option value="1">主题 &emsp;&emsp;&emsp;|</option>
                        </select>
                    </span>
                    <span><input type="text"></span>
                    <span class="img_rowa"><img src="images/rowt_r.png" alt="">&nbsp;搜索</span>
                </div>
            </div>

            <!-- 格线 -->
        </div>

        <div class="footer">
            <!-- 网页底部 -->
            <ul>
                <li><a href="" title="法律高地">法律高地</a></li>
                <li><a href="" title="隐私政策">隐私政策</a></li>
                <li><a href="" title="电子邮件">电子邮件</a></li>
                <li><a href="" title="网站地图">网站地图</a></li>
            </ul>
            <div class="clear"></div>
            <p>COPYRIGHT ⓒ WENGDO company. All rights reserved. </p>
            <div class="select">
                <select name="" id="">
                    <option value="">友情链接</option>
                    <option value="">腾讯网</option>
                    <option value="">淘宝网</option>
                </select>
            </div>
        </div>
    </div>

    <script src="js/jquery-min-3.4.1.js"></script>
    <script>
        // jq 的隐式迭代
        $('.zan').parent().click(function() {
            // console.log(1)
            // 事件结构
            // $(this) 这是td，图片的父标签
            
            if($(this).children('img').attr('abc')==1){
                $(this).children('img').attr('src','images/zan1.png').attr('abc',0);
            }else{
                $(this).children('img').attr('src','images/zan2.png').attr('abc',1); 
            }
            // attr()   更改、添加属性值
            
            // 后面使用ajax异步操作，记录点赞状态（记录服务端的数据库里面）
            
        });
    </script>
</body>

</html>